<template>
  <el-card class="box-card mb20">
    <div slot="header" class="clearfix">
      <span>设备报警数据</span>
    </div>

     <el-row :gutter="5">
       <el-col :span="12">
          <el-table  :data="tableData"  style="width: 100%"  @current-change="handleCurrentChange">
               <el-table-column  prop="alarmTime"  label="报警时间"  width="180"> </el-table-column>
               <el-table-column  prop="reason" label="原因"  ></el-table-column>
         </el-table>

          <el-pagination v-if="total>0"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="queryParams.page"
               :page-sizes="[10, 20, 30, 40]"
               :page-size="queryParams.size"
               layout="total, sizes, prev, pager, next"
               :total="total">
             </el-pagination>

       </el-col>
       <el-col :span="12">
        <!-- 地图-->
        <baidu-map class="bm-view" ak="3LgMlTyAIzk2ok2Sn5ZY6NPPmVQjMFch" center="重庆" :zoom="zoom" @ready="handler">
           <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
           <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
           <!-- 绘制电子围栏区域 -->
           <template v-if="currentRow">
              <bm-circle :center="calcPoint(currentRow)"  :radius="currentRow.fenceRadius" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2"   :editing="false">
              </bm-circle>
              <bm-label  class="my-maptip" :content="showInfo(currentRow)" :offset="{width: -55, height: -50}" :position="calcPoint(currentRow)" :labelStyle="{color: 'red', fontSize : '10px'}" />

              <bm-marker :position="calcMarkerPoint(currentRow)" @click="infoWindowOpen(currentRow)"  >
                <bm-info-window :position="calcMarkerPoint(currentRow)"  @close="infoWindowClose(currentRow)"  :show="infoWindowsShow"     >
                   <p v-text="'报警原因：'+currentRow.reason"></p>
                   <p v-text="'报警设备:'+currentRow.deviceName "></p>
                   <p >报警时间:{{currentRow.alarmTime}}</p>
                   <p >位置:{{currentRow.deviceLon}},{{currentRow.deviceLat}}</p>
                   <p >围栏名称:{{currentRow.fenceName}}</p>
                  <p >负责人:{{currentRow.userName}}</p>
                 </bm-info-window>
               </bm-marker>

           </template>
        </baidu-map>
       </el-col>
     </el-row>


  </el-card>
</template>

<script>
  import {  BaiduMap, BmMarker,BmLabel,BmInfoWindow, BmNavigation,BmGeolocation,BmCityList,BmControl,BmAutoComplete,BmMapType,BmCircle} from 'vue-baidu-map'
  import {listApi} from '@/api/hat/alarmhistory.js'
  export default{
    props:{
      device_id: {
        type: Number,
        required: true
      }
    },
    components: {
      BaiduMap,
      BmNavigation,
      BmGeolocation,
      BmCityList,
      BmMarker,
      BmControl,
      BmAutoComplete,
      BmMapType,
      BmCircle,
      BmLabel,
      BmInfoWindow
    },
    data () {
      return {
        //是否显示信息窗体
        infoWindowsShow: true,
        currentRow: undefined,
        queryParams: {
           page: 1,
           size: 10,
           deviceId: undefined
        },
        //表格单选状态
        tableData: [
        ],
        total:0,
        zoom: 12,
        BMap: undefined,
        map: undefined,
      };
    },
    created() {
       if( this.device_id>0){
         this.queryParams.deviceId= this.device_id
         this.fetchData()
       }
    },
    methods:{
      handler ({ BMap, map }) {
        this.BMap = BMap
        this.map = map
        //允许鼠标绽放地图
        this.map.enableScrollWheelZoom(true);
        this.zoom = 12
      },
      //信息窗体关闭
      infoWindowClose (item) {
          this.infoWindowsShow=false
        },
        //信息窗体打工
        infoWindowOpen (item) {
          this.infoWindowsShow=true
        },
      handleSizeChange(val) {
        this.queryParams.page=1
        this.queryParams.size=val
        this.fetchData()
       },
        handleCurrentChange(val) {
           this.queryParams.page=val
         this.fetchData()
       },
       fetchData(){
         listApi(this.queryParams).then(resp=> {
           this.tableData=resp.rows
           this.total=resp.total
         })
       },
       //点击左边表格
       handleCurrentChange (val) {
         this.currentRow = val;
       },
       //构造电子围栏坐标
       calcPoint(item){
         return  {
          lng: item.fenceLon,
          lat: item.fenceLat
          }
       },
       //电子设备的位置
       calcMarkerPoint(item){
         return  {
          lng: item.deviceLon,
          lat: item.deviceLat
          }
       },
       showInfo(item){
         return `<p>围栏名称:${item.fenceName}</p>
         <p>负责人:${item.userName}</p> `

       },
    },
    watch: {
      'device_id' : function (val, oldVal) {
        //当设备发生变化的时候，重新查询
         if(val>0){
            this.queryParams.deviceId=val
            this.currentRow=undefined
            this.handleSizeChange(1)
         }
      }
    }
  }
</script>

<style scoped>
  .bm-view {
    width: 100%;
    height:500px;
  }
</style>
